<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HarmonyOS 分割线组件示例</title>
  <link rel="stylesheet" href="../dist/harmony-style.css">
  <link rel="stylesheet" href="common-styles.css">
</head>
<body>
  <div class="container">
    <h1 class="title title-large">分割线组件示例</h1>
    
    <!-- 基础分割线 -->
    <div class="example-section">
      <h2 class="example-section-title">基础分割线</h2>
      
      <div class="demo-item">
        <p class="text">上方的文本内容</p>
        <div class="divider"></div>
        <p class="text">下方的文本内容</p>
      </div>
      
      <div class="demo-item">
        <p class="text">水平分割线</p>
        <div class="divider-horizontal"></div>
        <p class="text">另一个文本内容</p>
      </div>
    </div>
    
    <!-- 垂直分割线 -->
    <div class="example-section">
      <h2 class="example-section-title">垂直分割线</h2>
      
      <div class="demo-item d-flex align-center demo-height">
        <span class="text">左侧内容</span>
        <div class="divider-vertical"></div>
        <span class="text">中间内容</span>
        <div class="divider-vertical"></div>
        <span class="text">右侧内容</span>
      </div>
    </div>
    
    <!-- 分割线样式 -->
    <div class="example-section">
      <h2 class="example-section-title">分割线样式</h2>
      
      <div class="demo-item">
        <p class="text">实线分割线（默认）</p>
        <div class="divider divider-solid"></div>
      </div>
      
      <div class="demo-item">
        <p class="text">虚线分割线</p>
        <div class="divider divider-dashed"></div>
      </div>
      
      <div class="demo-item">
        <p class="text">点线分割线</p>
        <div class="divider divider-dotted"></div>
      </div>
    </div>
    
    <!-- 分割线粗细 -->
    <div class="example-section">
      <h2 class="example-section-title">分割线粗细</h2>
      
      <div class="demo-item">
        <p class="text">细线（默认）</p>
        <div class="divider divider-thin"></div>
      </div>
      
      <div class="demo-item">
        <p class="text">粗线</p>
        <div class="divider divider-thick"></div>
      </div>
    </div>
    
    <!-- 分割线颜色 -->
    <div class="example-section">
      <h2 class="example-section-title">分割线颜色</h2>
      
      <div class="demo-item">
        <p class="text">默认颜色</p>
        <div class="divider divider-primary"></div>
      </div>
      
      <div class="demo-item">
        <p class="text">次要颜色</p>
        <div class="divider divider-secondary"></div>
      </div>
      
      <div class="demo-item">
        <p class="text">三级颜色</p>
        <div class="divider divider-tertiary"></div>
      </div>
      
      <div class="demo-item">
        <p class="text">品牌色</p>
        <div class="divider divider-brand"></div>
      </div>
    </div>
    
    <!-- 分割线间距 -->
    <div class="example-section">
      <h2 class="example-section-title">分割线间距</h2>
      
      <div class="demo-item">
        <p class="text">无间距</p>
        <div class="divider divider-no-spacing"></div>
        <p class="text">紧贴分割线</p>
      </div>
      
      <div class="demo-item">
        <p class="text">紧凑间距</p>
        <div class="divider divider-compact"></div>
        <p class="text">紧凑间距内容</p>
      </div>
      
      <div class="demo-item">
        <p class="text">默认间距</p>
        <div class="divider"></div>
        <p class="text">默认间距内容</p>
      </div>
      
      <div class="demo-item">
        <p class="text">宽松间距</p>
        <div class="divider divider-loose"></div>
        <p class="text">宽松间距内容</p>
      </div>
    </div>
    
    <!-- 带文本的分割线 -->
    <div class="example-section">
      <h2 class="example-section-title">带文本的分割线</h2>
      
      <div class="demo-item">
        <div class="divider-with-text">或</div>
      </div>
      
      <div class="demo-item">
        <div class="divider-with-text divider-text-left">左侧文本</div>
      </div>
      
      <div class="demo-item">
        <div class="divider-with-text divider-text-right">右侧文本</div>
      </div>
    </div>
    
    <!-- 实际应用示例 -->
    <div class="example-section">
      <h2 class="example-section-title">实际应用示例</h2>
      
      <div class="demo-item">
        <h3 class="title title-sub-medium">表单分割</h3>
        <form>
          <div class="form-group">
            <label class="input-label">用户名</label>
            <input type="text" class="input" placeholder="请输入用户名">
          </div>
          <div class="divider divider-compact"></div>
          <div class="form-group">
            <label class="input-label">密码</label>
            <input type="password" class="input" placeholder="请输入密码">
          </div>
        </form>
      </div>
      
      <div class="demo-item">
        <h3 class="title title-sub-medium">列表分割</h3>
        <div>
          <div class="list-item">
            <div class="list-item-content">
              <h3 class="list-item-title">列表项 1</h3>
            </div>
          </div>
          <div class="divider divider-no-spacing"></div>
          <div class="list-item">
            <div class="list-item-content">
              <h3 class="list-item-title">列表项 2</h3>
            </div>
          </div>
          <div class="divider divider-no-spacing"></div>
          <div class="list-item">
            <div class="list-item-content">
              <h3 class="list-item-title">列表项 3</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

